<!-- 
* @desc:消息管理
* @fileName:Message.vue
* @author:chenxiaofeng@yzbdl.ac.cn
* @date:2022-5-24
!-->
<script setup lang="ts">
import { onMounted, reactive } from "vue";
// 引入用户管理查询
import MessageSearch from "./components/MessageSearch.vue";
// 引入用户管理详情
import MessageDetails from "./components/MessageDetails.vue";
// 引入用户管理分页
import MessagePagination from "@/components/common/pagination.vue";
import OperationDialog from "./components/Operation.vue";
import EventSetOperation from "./components/EventSetOperation.vue";
import { showErrorMessage } from "@/common/message";
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() as any;

// 定义列表数据、分页变量
const listData = reactive({
  // 列表数据
  tableData: [],
  // 列表总数
  total: 0,
  // 列表加载动画
  isListLoading: false,
  // 查询加载动画
  isSearchLoading: false,
  // 弹窗标识
  opDialog: false,
  // 弹窗标题
  addOrEdit: "",
  // 修改用户所存当前行数据
  oneUserInfo: {},
  //页面加载使用变量
  isPageLoading: null as any,
  // 事件管理弹窗标识
  eventSetDialog: false,
});

// 定义请求数据
let reqData = {
  nickName: "",
  userName: "",
  page: 1,
};

//获取列表请求方法
const reqTableList = () => {
  listData.isListLoading = true;
  const result = proxy.$HTTP.post({
    url: `/user/query`,
    params: {
      page: reqData.page,
      size: 10,
    },
    data: {
      nickName: reqData.nickName,
      userName: reqData.userName,
    },
  });
  result
    .then((res: any) => {
      if (res.isOk) {
        let listArray = res.data.records;
        if (res.data.records.length > 0) {
          listData.isPageLoading = true;
        } else {
          listData.isPageLoading = false;
        }
        listData.total = Number(res.data.total);
      }
      listData.isListLoading = false;
      listData.isSearchLoading = false;
    })
    .catch((response: any) => {
      showErrorMessage({ message: response.data });
      listData.isListLoading = false;
      listData.isSearchLoading = false;
    });
};

// 查询方法（serachParam：查询条件参数）
const searchFunc = (serachParam: any) => {
  listData.isSearchLoading = true;
  // 查询方法实现
  reqData.nickName = serachParam.nickValue;
  reqData.userName = serachParam.userValue;
  reqTableList();
};

// 获取当前分页页码（pageNumber：所选页码）
const getCurrentPageNumber = (pageNumber: number) => {
  reqData.page = pageNumber;
  reqTableList();
};

// 新增弹窗控制
const dialogControlFunc = (addOrEdit: string) => {
  listData.oneUserInfo = {};
  listData.opDialog = true;
};

// 编辑弹窗控制
const dialogEditFunc = (addOrEdit: string, oneInfo: any) => {
  listData.oneUserInfo = { ...oneInfo };
  listData.opDialog = true;
};

// 打开事件管理弹窗
const eventSetDialogOpenFunc = () => {
  listData.eventSetDialog = true;
};

onMounted(() => {
  // 初始化列表数据
  reqTableList();
  // 获取角色列表i
});
</script>

<template>
  <div class="page-list">
    <!-- 表单 -->
    <div class="page-table">
      <!-- 查询 -->
      <message-search
        :searchFunc="searchFunc"
        :isSearchLoading="listData.isSearchLoading"
        :dialogControlFunc="dialogControlFunc"
        :eventSetDialogOpenFunc="eventSetDialogOpenFunc"
      ></message-search>
      <!-- 列表详情 -->
      <message-details
        :isPageLoading="listData.isPageLoading"
        :dialogEditFunc="dialogEditFunc"
        :tableData="listData.tableData"
        :isListLoading="listData.isListLoading"
      ></message-details>
      <!-- 分页 -->
      <message-pagination
        :total="listData.total"
        :getCurrentPageNumber="getCurrentPageNumber"
      ></message-pagination>
    </div>
  </div>
  <!-- 新增弹窗 -->
  <el-dialog
    v-model="listData.opDialog"
    v-if="listData.opDialog"
    title="接受设置"
    :width="740"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <operation-dialog />
  </el-dialog>

  <!-- 事件管理弹窗 -->
  <el-dialog
    v-model="listData.eventSetDialog"
    v-if="listData.eventSetDialog"
    title="事件管理"
    :width="740"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <event-set-operation />
  </el-dialog>
</template>

<style lang="scss" scoped>
.page-list {
  background-color: #fff;
  position: relative;
  padding: 15px;
  height: calc(100vh - 130px);
}
</style>
